<template>
  <div id="social">
    <v-container grid-list-xl fluid>
      <v-layout row wrap>
        <!-- mini chart -->
        <v-flex sm12>
          <h4>Mini Chart</h4>
        </v-flex>
        <v-flex lg3 sm6>
          <mini-chart
            title="Monthly Sales"
            sub-title="10%"
            icon="trending_up"
            :data="dataset.monthVisit"
            :chart-color="color.blue.base"
            type="bar"
          >
          </mini-chart>
        </v-flex>
        <v-flex lg3 sm6>
          <mini-chart
            title="Daily Visit"
            sub-title="20%"
            icon="trending_up"
            :data="dataset.monthVisit"
            :chart-color="color.green.base"
            type="area"
          >
          </mini-chart>          
        </v-flex>
        <v-flex lg3 sm6>
          <v-card>
            <v-card-text>
              <div class="layout row ma-0 align-center justify-space-between">
                <div class="text-box">
                  <div class="subheading pb-2">Bounce Rate</div>
                  <span class="grey--text">-10% <v-icon small color="green">trending_down</v-icon> </span>
                </div>
                <div class="chart">
                  <v-progress-circular
                      :size="60"
                      :width="5"
                      :rotate="360"
                      :value="10"
                      color="success"
                    >
                    10
                    </v-progress-circular>
                </div>
              </div>
            </v-card-text>
          </v-card>             
        </v-flex>
        <v-flex lg3 sm6>
          <mini-chart
            title="Sales Trend"
            sub-title="10%"
            icon="trending_down"
            :data="dataset.monthVisit"
            :chart-color="color.red.base"
            type="line"
          >
          </mini-chart>          
        </v-flex>
      </v-layout>
      <!-- box chart -->
      <v-layout row wrap>
        <v-flex sm12>
          <h4>Box Chart</h4>
        </v-flex>        
        <v-flex lg4 sm6 xs12>
          <box-chart
            title="Page views"
            sub-title="10%"
            icon="trending_up"
            :data="dataset.monthVisit"
            :chart-color="[color.blue.darken1]"
            type="area"
          >
          </box-chart>
        </v-flex>        
        <v-flex lg4 sm6 xs12>
          <box-chart
            title="Monthly Sales"
            sub-title="10%"
            icon="trending_up"
            card-color="pink"
            :data="dataset.monthVisit"
            :chart-color="[color.pink.lighten2]"
            type="bar"
          >
          </box-chart>
        </v-flex>     
        <v-flex lg4 sm6 xs12>
          <box-chart
            card-color="indigo"
            title="Page views"
            sub-title="10%"
            icon="trending_up"
            :data="dataset.monthVisit"
            :chart-color="[color.shades.white]"
            type="line"
          >
          </box-chart>
        </v-flex>     
      </v-layout>
      <!-- complex chart -->
      <v-layout row wrap>
        <v-flex sm12>
          <h4>Complex Chart</h4>
        </v-flex>             
        <v-flex lg4 sm12>
          <v-card dark color="green">
            <v-card-title>
              <div class="layout row ma-0">
                <div class="subheading">Today</div>
                <v-spacer></v-spacer>
                <div class="caption"> <v-icon>trending_up</v-icon>  20%</div>
              </div>
            </v-card-title>
            <v-responsive class="white--text">
              <e-chart 
                ref="chart"
                :path-option="[
                ['dataset.source', dataset.stackData],
                ['grid.bottom', '10%'],
                ['grid.top', '5%'],
                ['xAxis.show', false],
                ['yAxis.show', false],      
                ['series[0].type', 'bar'],         
                ['series[0].barGap', '-100%'],         
                ['series[0].itemStyle.normal.color', 'rgba(0,0,0,0.1)'],         
                ['series[0].barWidth', '50%'],        
                ['series[1].barWidth', '50%'],        
                ['series[1].type', 'bar'],          
                ['series[1].itemStyle.normal.color', color.shades.white],         
                ]"
                height="200px"
                width="100%"
              >
              </e-chart>
            </v-responsive>
            <v-card-text class="white">
              <div class="layout row align-center ma-0">
                <div class="grey--text">
                  <div class="caption">MAXIMUM BOUNCE</div>
                  <div class="subheading mt-2">2500</div>
                </div>
                <v-spacer></v-spacer>
                <div class="">
                  <v-progress-circular
                    :size="100"
                    :width="15"
                    :rotate="360"
                    :value="10"
                    color="blue"
                  >
                    10
                  </v-progress-circular>
                </div>
              </div>
            </v-card-text>
          </v-card>            
        </v-flex>
        <v-flex lg4 sm12>
          <v-card class="elevation-0 box-shadow" dark color="pink">
            <v-card-title>
              <div class="layout row ma-0">
                <div class="subheading">Today</div>
                <v-spacer></v-spacer>
                <div class="caption"> <v-icon>trending_up</v-icon>  20%</div>
              </div>
            </v-card-title>
            <v-responsive
              class="white--text"
            >
              <e-chart 
                :path-option="[
                  ['dataset.source', dataset.monthVisit],
                  ['color', [color.pink.lighten2]],
                  ['grid.left', '0'],
                  ['grid.bottom', '0'],
                  ['grid.right', '0'],                
                  ['xAxis.show', false],
                  ['yAxis.show', false],
                ]"
                height="200px"
                width="100%"
              >
              </e-chart>
            </v-responsive>
            <v-card-text class="white">
              <div class="layout row align-center ma-0">
                <div class="grey--text">
                  <div class="caption">MAXIMUM BOUNCE</div>
                  <div class="subheading mt-2">2500</div>
                </div>
                <v-spacer></v-spacer>
                <div class="">
                  <v-progress-circular
                    :size="100"
                    :width="15"
                    :rotate="360"
                    :value="10"
                    color="blue"
                  >
                    10
                  </v-progress-circular>
                </div>
              </div>
            </v-card-text>
          </v-card>             
        </v-flex>
        <v-flex lg4 sm12>
          <v-card color="blue darken-1" dark>
            <v-card-title>
              <div class="layout row ma-0">
                <div class="subheading">Today</div>
                <v-spacer></v-spacer>
                <div class="caption"> <v-icon>trending_up</v-icon>  20%</div>
              </div>
            </v-card-title>
            <v-responsive
            >
              <e-chart 
              :path-option="[
                ['dataset.source', dataset.monthVisit],
                ['color', [color.blue.base]],
                ['xAxis.show', false],
                ['xAxis.boundaryGap', false],
                ['grid.left', '0'],
                ['grid.bottom', '0'],
                ['grid.right', '0'],
                ['yAxis.show', false],
                ['series[0].areaStyle', {} ],
                ['series[0].smooth', true ],
              ]"
              height="200px"
              width="100%"
              >
              </e-chart>
            </v-responsive>    
            <v-card-text class="white">
              <div class="layout row align-center ma-0">
                <div class="grey--text">
                  <div class="caption">MAXIMUM BOUNCE</div>
                  <div class="subheading mt-2">2500</div>
                </div>
                <v-spacer></v-spacer>
                <div class="">
                  <v-progress-circular
                    :size="100"
                    :width="15"
                    :rotate="360"
                    :value="10"
                    color="blue"
                  >
                    10
                  </v-progress-circular>
                </div>
              </div>
            </v-card-text>                    
          </v-card>             
        </v-flex>        
        <v-flex lg6 sm12 xs12>
          <v-widget title="Analysis - Donut">
            <div slot="widget-content">
                <e-chart 
                :path-option="[
                  ['dataset.source', dataset.campaign],
                  ['color', [color.amber.base, color.indigo.base, color.pink.base, color.green.base, color.teal.base, color.purple.base]],
                  ['legend.orient', 'horizontal'],
                  ['legend.y', 'bottom'],
                  ['xAxis.show', false],
                  ['yAxis.show', false],          
                  ['series[0].type', 'pie'],         
                  ['series[0].avoidLabelOverlap', true],         
                  ['series[0].radius', ['50%', '70%']],         
                ]"
                height="350px"
                width="100%"
                >
                </e-chart>   
            </div>
          </v-widget>            
        </v-flex>
        <v-flex lg6 sm12 xs12>
          <v-widget title="Analysis - Pie">
            <div slot="widget-content">
                <e-chart 
                :path-option="[
                  ['dataset.source', dataset.campaign],
                  ['color', [color.lightBlue.base, color.indigo.base, color.pink.base, color.green.base, color.cyan.base, color.teal.base]],
                  ['legend.orient', 'horizontal'],
                  ['legend.y', 'bottom'],
                  ['xAxis.show', false],
                  ['yAxis.show', false],          
                  ['series[0].type', 'pie'],         
                ]"
                height="350px"
                width="100%"
                >
                </e-chart>               
            </div>
          </v-widget>             
        </v-flex>
        <v-flex lg12 sm12>
          <v-tabs v-model="selectedTab" @change="handleTabChange">
            <v-tab ripple href="#tab-1">
              Sales
            </v-tab>
            <v-tab ripple href="#tab-2">
              Visit
            </v-tab>
            <v-tabs-items v-model="selectedTab">
              <v-tab-item value="tab-1" class="d-block">
                <v-card>
                  <e-chart 
                  :path-option="[
                    ['color',[color.lightBlue.base, color.purple.base]],
                    ['dataset.source', dataset.monthVisit],
                    ['series[0].type', 'bar'],
                    ['series[1].type', 'bar']
                  ]"
                  height="350px"
                  width="100%"
                  >
                  </e-chart>     
                </v-card>              
              </v-tab-item>
              <v-tab-item value="tab-2">
                <v-card>
                  <e-chart 
                  :path-option="[
                    ['dataset.source', dataset.monthVisit],
                    ['series[0].type', 'line']
                  ]"
                  height="350px"
                  width="100%"
                  >
                  </e-chart>   
                </v-card>
              </v-tab-item>              
            </v-tabs-items>
          </v-tabs>          
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
import EChart from '@/components/chart/echart';
import {
  StackData,
  SinData,
  monthVisitData,
  campaignData,
  locationData,
} from '@/api/chart';
import Material from 'vuetify/es5/util/colors';
import MiniChart from '@/components/widgets/chart/MiniChart';
import BoxChart from '@/components/widgets/chart/BoxChart';
import VWidget from '@/components/VWidget';
export default {
  components: {
    BoxChart,
    MiniChart,
    EChart,
    VWidget
  },
  data () {
    return {
      selectedTab: 'tab-1',
      option: null,
      dataset: {
        sinData: SinData,
        monthVisit: monthVisitData,
        campaign: campaignData,
        location: locationData,
        stackData: StackData,
      },
      color: Material,
      
    };
  },
  created () {
    console.log(this.$refs.chart);
  },  
  methods: {
    handleTabChange (val, e) {
      // make sure the chart resized while parent from hidden to show
      window.dispatchEvent(new Event('resize'));
    }
  },

};
</script>